<script setup>
	import {
		reactive,
		ref
	} from "vue"
	let avatar = ref("https://uview-plus.jiangruyi.com/uview-plus/album/6.jpg")

	let isLogin = ref(false)
	const toLogin = () => {
		uni.navigateTo({
			url: "/pages/login/index"
		})
	}
	
	const gridList = reactive([
		{
			label: '刷题记录',
			value: 1,
			icon: '/static/icons/shuati.png'
			
		},{
			label: '考试记录',
			value: 2,
			icon: '/static/icons/kaoshi.png'
			
		}
	])
	
	const cellList = reactive([
		{
			label: '客服',
			value: 1,
			icon: 'kefu-ermai'
			
		},{
			label: '设置',
			value: 2,
			icon: 'setting'
			
		},{
			label: '关于我们',
			value: 3,
			icon: 'error-circle'
			
		}
	])
</script>

<template>
	<view class="container">
		<view class="header-box">
			<view class="u-flex u-flex-items-center user-card">
				<up-avatar size="70" :src="avatar"></up-avatar>

				<view class="u-m-l-12" v-if="isLogin">
					<up-text mode="name" :lines="1" size="20" text="旅行者"
						color="#fff"></up-text>
					<up-gap height="6"></up-gap>
					<up-text color="#fff" :text="`积分: ${0}`"></up-text>
				</view>

				<view class="u-m-l-12 u-flex u-flex-column u-flex-center login-btn" v-else @click="toLogin">
					<text class="y-f-s-40">立即登录</text>
					<text class="y-f-s-26 u-m-t-10">哈哈跑题 轻松备考</text>
				</view>

				<view class="y-m-l-auto">
					<up-icon name="arrow-right" color="#fff"></up-icon>
				</view>
			</view>
		</view>
		
		<u-gap height="10"></u-gap>
		<view class="u-flex u-flex-wrap grid-box">
			<view class=""></view>
			<view class="u-flex u-flex-column u-flex-items-center u-flex-center item" v-for="(item,index) in gridList"
				:key="index">
				<up-icon :name="item.icon" size="40" color="#1296db"></up-icon>
				<text class="y-f-s-30">{{item.label}}</text>
			</view>
		</view>

		<u-gap height="10"></u-gap>
		<view class="cell-box">
			<view class="u-flex u-flex-items-center u-flex-between item" v-for="item in cellList" :key="item.value">
				<view class="u-flex u-flex-items-center">
					<up-icon :name="item.icon" size="30"></up-icon>
					<text class="y-f-s-30 u-m-l-10">{{item.label}}</text>
				</view>
				<up-icon name="arrow-right"></up-icon>
			</view>
		</view>
		
		<up-gap height="60"></up-gap>
		<up-button text="退出登录" :customStyle="{width:'460rpx'}" color="#1269db"></up-button>
	</view>
</template>

<style lang="scss" scoped>
	.header-box {
		padding: 40rpx 20rpx;
		background: #3494E6;  /* fallback for old browsers */
		background: -webkit-linear-gradient(to top, #EC6EAD, #3494E6);  /* Chrome 10-25, Safari 5.1-6 */
		background: linear-gradient(to top, #EC6EAD, #3494E6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

		color: #fff;

		border-radius: 0 0 30% 30%;


		.user-card {
			.login-btn {
				flex: 1;
				height: 120rpx;
			}
		}
	}


	.grid-box {
		margin: 0 20rpx;
		padding: 30rpx 0;
		background-color: #fff;
		border-radius: 20rpx;

		.item {
			width: 177.5rpx ;
		}
	}

	.cell-box {
		margin: 0 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.item {
			border-top: 1px solid #f8f8f8;
			padding: 30rpx 20rpx;
		}
	}
</style>